<script setup lang="ts">
import {useRoute, useRouter} from 'vue-router'
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import Footer from "../components/Footer.vue";
import {findAllByUidOrByUidAndBid, listAllBusinessByType} from "../network/api.ts";

const route = useRoute()


const router = useRouter()

let business = reactive({  //这里必须使用ref才能响应式赋值字典, 否则会出bug
  businessId:'',
  businessName:'',
  businessaddress:'',
  businessExplain:'',
  bussinessImg:'',
  orderTypeId:1,
  starPrice:0.0,
  deliveryPrice:0.0,
  remarks:'',
  quantity:1
})
let bussinessArr = ref([business])
let user = ref(sessionStorage.getItem('user'))
//let url = "http://localhost:8080/

onMounted(()=>{

  console.log("BusinessList onMounted: userId="+sessionStorage.getItem("userId")+"  user="+sessionStorage.getItem('user'))


  let type = route.query.orderTypeId

  listAllBusinessByType(type).then(res =>{
        bussinessArr.value=res.data
        console.log(bussinessArr.value)
        if(user.value!=null){
          console.log("执行listCart")
          listCart()
        }else{
          console.log("尚未登录,由index页进入了businessList页")
        }
      })
      .catch(err => {
        console.log(err)
      })

})

function listCart(){
  let data=reactive({
    uid:sessionStorage.getItem("userId")
  })
  findAllByUidOrByUidAndBid(data).then(res=>{
    let carArr = res.data
    console.log("carArr[0].business:")
    console.log(carArr)
    for(let businseeItem of bussinessArr.value){ //通过 of 取到数组里面的对象
      businseeItem.quantity = 0; //初始: 用户没有购买这个商品, 即为0
      for(let cartItem of carArr){
        if(cartItem.business.businessId == businseeItem.businessId){
          businseeItem.quantity += cartItem.quantity;
        }
      }
    }
    bussinessArr.value.sort()
  }).catch(error=>{
    console.error(error)
  })
}
function toBusinessInfo(businessId){
  if(user.value!=null){
    router.push({
      path:'/businessInfo',
      query:{businessId:businessId}
    })
  }else{
    console.log("尚未登录,由index页进入了businessList页")
    router.push({
      path:'/login'
    })
  }

}

</script>

<template>
  <div class="wrapper w-full h-full">
  <!-- header部分 -->
    <header class="w-full h-12vw bg-[#0097ff] flex justify-around items-center text-white text-[4.8vw] fixed left-0 top-0 z-1000">
      <p>商家列表</p>
    </header>

    <!-- 商家列表部分 -->
    <ul class="business w-full mt-12vw pb-14vw ">
      <li v-for="item in bussinessArr"
          class="w-full box-border p-2.5vw border-solid border-1 border-#ddd select-none cursor-pointer flex items-center"
          @click="toBusinessInfo(item.businessId)"
      >
        <div class="business-img relative">
          <img class="w-20vw h-20vw " :src="item.businessImg">
          <div class="business-img-quantity w-5vw h-5vw bg-red text-#fff text-3.6vw rounded-2.5vw flex justify-center items-center absolute right--1.5vw top--1.5vw"
          >
            {{ item.quantity }}</div>
        </div>
        <div class="business-info ml-3vw">
          <h3 class="text-3.8vw">{{ item.businessName}}</h3>
          <p class="text-3vw text-#888 mt-2vw">&#165;{{ item.starPrice }}起送 | &#165;{{ item.deliveryPrice }}配送</p>
          <p class="text-3vw text-#888 mt-2vw">{{ item.businessExplain }}</p>
        </div>
      </li>
    </ul>

    <!-- 底部菜单部分 -->
    <Footer></Footer>

  </div>

</template>

<style scoped>

</style>